<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2023/6/13
  Time: 8:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.8.6/dist/css/layui.css" rel="stylesheet">
    <style>
        .layui-form{
            display: flex;
            width: 100%;
        }
        #left{
            display: flex;
            flex-direction: column;
            /*margin-top: 60px;*/
            /*margin-left: 300px;*/
        }
        #right{
            display: flex;
            flex-direction: column;
            /*margin-top: 69px;*/
            margin-left: 250px;
        }
    </style>
</head>
<body>

<form action="#" id="fm">
    <div class="layui-form">

        <div id="left">
            <%--业务类型--%>
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        业务类型
                    </div>
                    <input type="text" name="bussinessType" placeholder="业务类型" class="layui-input">
                </div>
            </div><br>
            <%--项目名称--%>
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        项目名称
                    </div>
                    <input type="text"name="projectName" placeholder="项目名称" class="layui-input">
                </div>
            </div><br>
            <%--相关客户--%>
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        相关客户
                    </div>
                    <input type="text"  name="client" placeholder="相关客户" class="layui-input">
                </div>
            </div><br>
            <%--订单编号--%>
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        订单编号
                    </div>
                    <input type="text"name="orderNumber" placeholder="订单编号" class="layui-input">
                </div>
            </div><br>
            <%--交易款号--%>
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        交易款号
                    </div>
                    <input type="text"name="paymentNumber" placeholder="交易款号" class="layui-input">
                </div>
            </div><br>
            <%--支出金额--%>
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        支出金额
                    </div>
                    <input type="text"name="expendMoney" placeholder="支出金额" class="layui-input">
                </div>
            </div><br>
        </div>
        <div id="right">
            <%--支出日期--%>
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        支出日期
                    </div>
                    <input type="date" name="expendDate">
                </div>
            </div><br>
            <%--对方账户--%>
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        对方账户
                    </div>
                    <input name="clientAccount" type="text" placeholder="对方账户" class="layui-input">
                </div>
            </div><br>
            <%--付款方式--%>
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        付款方式
                    </div>
<%--                    <input type="text" name="payWay" placeholder="付款方式" class="layui-input">--%>
                    <select name="payWay" lay-verify="">
                        <option value="-1">请选择付款方式</option>
                        <option value="0">支付宝</option>
                        <option value="1">微信</option>
                        <option value="2">刷卡</option>
                    </select>
                </div>
            </div><br>
            <%--申请人--%>
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        申请人
                    </div>
                    <input type="text" name="proposer" placeholder="申请人" class="layui-input">
                </div>
            </div><br>
            <%--备注--%>
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        备注
                    </div>
                    <input type="text"name="remark" placeholder="备注" class="layui-input">
                </div>
            </div><br>
            <%--附件--%>
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        附件
                    </div>

                    <%--<div class="layui-btn-container">--%>
                    <%--<button type="button" class="layui-btn layui-btn-sm" id="ID-upload-demo-choose">选择文件</button>--%>
                    <%--<button type="button" class="layui-btn layui-btn-sm" id="ID-upload-demo-action">开始上传</button>--%>
                    <%--</div>--%>
                    <div class="layui-input-suffix">
                        <button class="layui-btn layui-btn-primary" id="ID-upload-demo-choose" style="background-color: #52CCBA;color: white">选择文件</button>
                        <button class="layui-btn layui-btn-primary" id="ID-upload-demo-action"  style="background-color: #52CCBA;color: white" onclick="addExpend()">开始上传</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</form>
<button onclick="getAllisNull()" class="layui-btn layui-btn-warm" style="align-content: center">提交</button>
<script src="//unpkg.com/layui@2.8.6/dist/layui.js"></script>
<script>
    layui.use(function(){
        var element = layui.element;
        // 绑定自定义的 tab 元素
        element.tab({
            headerElem: '#tabHeader>.layui-btn',
            bodyElem: '#tabBody>div'
        });
    });
</script>
</body>

<script type="text/javascript">
    function getAllisNull() {
        let bussinessType = $('[name=bussinessType]').val();
        let projectName = $('[name=projectName]').val();
        let client = $('[name=client]').val();
        let orderNumber = $('[name=orderNumber]').val();
        let paymentNumber = $('[name=paymentNumber]').val();
        let expendMoney = $('[name=expendMoney]').val();
        let expendDate = $('[name=expendDate]').val();
        let clientAccount = $('[name=clientAccount]').val();
        let proposer = $('[name=proposer]').val();
        let remark = $('[name=remark]').val();
        let payWay = $('[name = payWay]').val();
        if (bussinessType==null||bussinessType==""){
            alert("业务类型不能为空")
            return false;
        }
        if (projectName==null||projectName==""){
            alert("项目名称不能为空")
            return false;
        }
        if (client==null||client==""){
            alert("相关客户不能为空")
            return false;
        }
        if (orderNumber==null||orderNumber==""){
            alert("订单编号不能为空")
            return false;
        }
        if (paymentNumber==null||paymentNumber==""){
            alert("交易款号不能为空")
            return false;
        }
        if (expendMoney==null||expendMoney==""){
            alert("支出金额不能为空 ")
            return false;
        }
        if (isNaN(expendMoney)){
            alert("请填写正确的金额")
            return false;
        }
        if (expendDate==null||expendDate==""){
            alert("请选择支出日期")
            return false;
        }
        if (clientAccount==null||clientAccount==""){
            alert("对方账户不能为空")
            return false;
        }
        if (payWay== -1){
            alert("请选择付款方式")
            return false;
        }
        if (proposer==null||proposer==""){
            alert("申请人不能为空")
            return false;
        }
        if (remark==null||remark==""){
            alert("备注不能为空 ")
            return false;
        }
        addExpend();
    }
    function addExpend(){
        let data = {};
        let value=$("#fm").serializeArray();
        console.log(value)
        $.each(value, function(index,item){
            data[item.name] = item.value;
        });
        let ino = JSON.stringify(data);
        console.log(ino)
        $.ajax( {
            "url"            :  "financeManager/addExpend",
            "type"         :  "post",
            "data"         :  ino,
            "dataType" :  "json",
            "contentType":"application/json;charset=utf-8;",
            "success"  :  function(result) {
                layer.msg(result.message);
                $('#fm')[0].reset();
            },
            "error"       :  function() {
                alert("出错了")
            }
        } )
    }
</script>
<script src="//unpkg.com/layui@2.8.6/dist/layui.js"></script>
<script>
    layui.use(function(){
        var upload = layui.upload;
        // 渲染
        upload.render({
            elem: '#ID-upload-demo-choose',
            url: '', // 此处配置你自己的上传接口即可
            auto: false,
            // multiple: true,
            bindAction: '#ID-upload-demo-action',
            done: function(res){
                layer.msg('上传成功');
                console.log(res)
            }
        });
    });
    // function Add() {
    //     window.location.href="222.jsp"
    // }
</script>


</html>
